<template>
  <div class="my">
    <div class="my-header">
      <h2>个人中心</h2>
      <div class="log" v-show="!isLog">
        <router-link to="/Log">
          <el-button type="danger">注册登陆</el-button>
        </router-link>
      </div>
      <div class="log_img" v-show="isLog">
        <img
          src="https://img2.woyaogexing.com/2020/09/07/97cbfc9a1e4c4634b268df54ed83c8d1!1242x9999.jpeg"
        />
      </div>
    </div>
    <div class="my-center common">
      <div class="store">
        <ul>
          <li class="store-li">
            <p>0</p>
            <p>收藏的店铺</p>
          </li>
          <li class="store-li">
            <p>0</p>
            <p>收藏的商品</p>
          </li>
          <li class="store-li">
            <p>0</p>
            <p>关注的店铺</p>
          </li>
          <li class="store-li">
            <p>0</p>
            <p>我的足迹</p>
          </li>
        </ul>
      </div>
      <div class="order">
        <p>我的订单</p>
      </div>
      <div class="store allorder">
        <ul>
          <li class="store-li">
            <i class="el-icon-s-order"></i>
            <p>全部订单</p>
          </li>
          <li class="store-li">
            <i class="el-icon-shopping-cart-full"></i>
            <p>待付款</p>
          </li>
          <li class="store-li">
            <i class="el-icon-truck"></i>
            <p>待收货</p>
          </li>
          <li class="store-li">
            <i class="el-icon-error"></i>
            <p>退款/退货</p>
          </li>
        </ul>
      </div>
      <div class="order address">
        <p>收货地址管理</p>
      </div>
      <div class="order address1">
        <p style="float: left">联系客服</p>
        <p style="float: right">400-168-4000</p>
      </div>
      <div class="order address2">
        <p>意见反馈</p>
      </div>
      <div class="order address3">
        <p>关于我们</p>
      </div>
      <div class="order address">
        <p>把商品推荐给他人</p>
      </div>
      <div class="quit">
        <el-button type="danger" @click="quit()" :disabled="isdisabled">退出</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
	  isLog: true,
	  isdisabled:true
    };
  },
  created() {
    this.getCookie();
  },
  methods: {
    getCookie() {
      //获取本地存储，判断是否存在cookie
      var cookie = JSON.parse(localStorage.getItem("cookie"));
      if (!cookie) {
		this.isLog = false;
		this.isdisabled=true
      } else {
		this.isLog = true;
		this.isdisabled=false
      }
    },
    //退出登陆
    quit() {
      this.$confirm("是否退出登陆?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          //清除保存的cookie
          localStorage.removeItem(["cookie"]);
          //页面刷新
          this.getCookie();
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  font-size: 15px;
}
li {
  list-style: none;
}
i {
  color: red;
  padding-top: 5px;
  font-size: 25px;
}
.my {
  background-color: #ccc;
  padding-bottom: 120px;
}
.my-header {
  text-align: center;
  background-color: #ff0000;
  height: 200px;
  width: 100%;
  line-height: 50px;
}
.log_img {
  width: 30%;
  height: 50%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
}
.log_img img {
  width: 100%;
}
.log {
  margin-top: 25px;
  height: 125px;
}
.log button {
  margin: 0 10px;
}
.my-center {
  background-color: #ccc;
}
.common {
  width: 90%;
  margin: 0 auto;
}
.store {
  height: 50px;
  background-color: #ffffff;
  margin-top: -25px;
}
.store-li {
  text-align: center;
  width: 25%;
  line-height: 25px;
  float: left;
  font-size: 13px;
}
.store-li p:first-child {
  color: red;
  padding-top: 2px;
}
.order {
  background-color: #ffffff;
  margin-top: 15px;
  border-bottom: 2px solid black;
  padding: 10px 0 10px 10px;
}
.allorder {
  margin-top: 0;
  padding-bottom: 10px;
}
.address {
  border: none;
}
.address1 {
  border: none;
  padding-bottom: 30px;
  padding-right: 10px;
}
.address2 {
  border: none;
  margin-top: 0px;
  border-top: 1px solid black;
}
.address3 {
  border: none;
  margin-top: 0px;
  border-top: 1px solid black;
}
.quit button {
  margin-top: 5px;
  width: 100%;
  height: 40px;
  border: 1px solid rgb(216, 207, 207);
}
</style>